<template>
  <div class="summary-panel">
    <div class="summary" :style="{ height: expandType ? 'auto' : '90px' }">
      <div
        class="summary-inner"
        id="summary-inner"
        v-html="videoInfoDetail?.videoInfo?.introduction"
      ></div>
    </div>
    <div class="expand-btn" v-show="showExpandBtn" @click="expand">
      {{ expandType ? '收起' : '展开更多' }}
    </div>
    <div class="tag-list">
      <router-link
        :to="`/search?keyword=${item}`"
        v-for="item in videoInfoDetail?.videoInfo?.tags"
        class="tag-item"
        target="_blank"
        >{{ item }}</router-link
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, onMounted, ref } from 'vue'

const videoInfoDetail: any = inject('videoInfo')

const showExpandBtn = ref(true)

const expandType = ref(false)

onMounted(() => {
  const height = document.querySelector('#summary-inner')?.clientHeight
  if ((height as number) > 90) {
    showExpandBtn.value = true
    expandType.value = false
  } else {
    showExpandBtn.value = false
    expandType.value = true
  }
})

//点击收起或展开更多
const expand = () => {
  expandType.value = !expandType.value
}
</script>

<style lang="less" scoped>
.summary-panel {
  padding: 20px 0px;
  border-bottom: 1px solid #ddd;
  .summary {
    overflow: hidden;
  }
  .expand-btn {
    display: inline-block;
    margin-top: 5px;
    cursor: pointer;
    &:hover {
      color: var(--blue);
    }
  }
  .tag-list {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .tag-item {
      cursor: pointer;
      text-decoration: none;
      color: var(--text2);
      background: #f1f2f3;
      border-radius: 16px;
      height: 32px;
      line-height: 32px;
      padding: 0px 12px;
      margin: 0 12px 8px 0;
    }
  }
}
</style>
